<template>
    <div class="photoinfo-container">
        <h3 class="title">{{photoinfo.title}}</h3>
        <p class="subtitle">
            <span>发表时间：{{photoinfo.add_time | dateFormat}}</span>
            <span>点击：{{photoinfo.click}}次</span>
        </p>
        <hr>

        <!-- 缩略图区域 -->
<!--        <vue-preview :slides="slide1" @close="handleClose"></vue-preview>-->
        <div class="thumbs">
            <!-- 注意：这里使用的 vue-preview 组件是版本 1.1.3,
                 之前上课录屏时候, 所使用的 1.0.5 版本的 vue-preview 存在 Bug -->
            <vue-preview :slides="list" @close="handleClose"></vue-preview>
        </div>
		<!-- 图片内容区域 -->
		<div class="content" v-html="photoinfo.content"></div>
		
		<!-- 放置一个现成的 评论子组件 -->
        <cmt-box :id="this.id"></cmt-box>
    </div>
</template>

<script>

    // 1. 导入 评论子组件
    import comment from "../subcomponents/comment.vue";
    import { Toast}  from 'mint-ui'
    export default {
        data(){
            return {
                id: this.$route.params.id,     //从路由中获取图片id
                photoinfo: [], // 图片详情数组
                list: [], //缩略图的数组
                slide1: [
                    {
                        src: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg',
                        msrc: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg',
                        alt: 'picture1',
                        title: 'Image Caption 1',
                        w: 600,
                        h: 400
                    },
                    {
                        src: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg',
                        msrc: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg',
                        alt: 'picture2',
                        title: 'Image Caption 2',
                        w: 1200,
                        h: 900
                    }
                ]
            }
        },
        created() {
            this.getPhotoInfo()
            this.getThumbs()
        },
        methods:{
            getPhotoInfo(){   //获取 图片详情
                this.$http.get('api/getimageInfo/' +this
                .id).then( result => {
                    if ( result.body.status===0){
                        this.photoinfo=result.body.message[0]
                    } else {
                        Toast('获取图片详情失败')
                    }
                })
            },
            getThumbs() {
                // 获取缩略图
                this.$http.get('api/getthumimages/' + this.id).then(result => {
                    if (result.body.status === 0) {
                        // 循环每个图片数据，补全图片的宽和高
                        result.body.message.forEach(item => {
                            item.w = 600
                            item.h = 400
                            item.alt='图片'
                            item.title='精美图片'
                            item.msrc = item.src   //关键点，赋值给它
                        })
                        // 把完整的数据保存到 list 中
                        this.list = result.body.message
                        console.log(this.list)
                    }  else{
                        Toast('获取缩略图失败！')
                    }
                })
            },
            handleClose () {
                console.log('close event')
            }
        },
        components:{
            "cmt-box": comment
        }
    }
</script>

<style lang="scss" scoped>
.photoinfo-container {
    padding:5px;
    .title {
        font-size: 16px;
        text-align: center;
        margin: 15px 0;
        color: #226aff;
    }
    .subtitle {
        font-size: 13px;
        display: flex;
        justify-content: space-between;
    }
    .content {
        font-size: 13px;
        line-height: 30px;
        img {
            width: 100%;
        }
    }
}
</style>

<style lang="scss">
    .thumbs {
        .my-gallery {
            display: flex;
            flex-wrap: wrap;   //默认换行
        }
        figure {
            width: 30%;
            margin: 5px;

            img {
                width: 100%;
                height: 100%;
                box-shadow: 0 0 8px #999;
                border-radius: 5px;
            }
        }
    }
</style>
